<template>
  <div class="music-time">
    <div class="Introduction flex items-center">
      <div class="mb-2 mt-2">
        <span class="text-xl font-bold mr-2" >听歌排行</span>
        <span class="text-sm yu-titleColor">累计听歌{{ userInfo.listenSongs }}首</span>
      </div>
      <div class="flex-1 text-xs text-right">
        <span
            :class="recordParams.type === 1 ? 'yu-textColor-active' : '' " class="yu-textColor-hover cursor-pointer"
            @click="switchTime(1)"
        >
          最近一周
        </span>
        <i> | </i>
        <span
            :class="recordParams.type === 0 ? 'yu-textColor-active' : '' "
            class="yu-textColor-hover  cursor-pointer"
            @click="switchTime(0)"
        >
          所有时间
        </span>
      </div>
    </div>
    <!-- 听歌排行 -->
    <MusicList
        :paginationPlaylist="recordData"
        :noShowPage="false"
        :isOther="false"
        :isHeader="false"
        :isMusicNum="myselfOrOther"
    />
  </div>
</template>

<script setup>
import {useStore} from "@/store/index";
import {useRoute, useRouter} from "vue-router";
import {reactive, toRefs, ref} from "vue";
import {asString} from "@/utils/index";
// 音乐列表
import MusicList from '@/components/MusicList/index.vue'

const router = useRouter()
const route = useRoute()
const data = reactive({
  recordData: [], // 获取听歌数据
  recordParams: {uid: route.query.id, type: 1}, // 获取听歌数据的参数
  isActions: -1, // 显示隐藏操作按钮
  cursorPointerText: 'cursor-pointer yu-textColor-hover',
  shareMusicInfo: {} // 分享弹窗数据
})
defineProps({
  userInfo: Object,
  myselfOrOther: Boolean
})
const {recordData, recordParams} = toRefs(data)

const store = useStore()


// { uid, type : type=1 时只返回 weekData, type=0 时返回 allData }
// 获取听歌数据
const getUserRecord = (params) => {
  let wa = params.type ? 'weekData' : 'allData'
  data.recordData = []
  store.getUserRecord(params).then(res => {
    let songs = {}
    res[wa].forEach((item, index) => {
      songs = {
        playCount: item.playCount,
        score: item.score,
        ...item.song
      }
      data.recordData.push(songs)
    })
  })
}
// 获取听歌数据 默认
getUserRecord(data.recordParams)

// 切换是最近一周还是 所有时间
const switchTime = (type) => {
  data.recordParams.type = type
  getUserRecord(data.recordParams)
}

</script>

<style scoped>

</style>
